0 11 ۲ آذر ۹۵
در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.
وسط چین کردن المنتها از نظر عمودی
این کار شاید بنظر سخت برسه ولی در عمل خیلی سخت هم نیس و این کار رو میتونین به آسونی انجام بدین و هر المنتی رو بصورت وسط چین در بیارید. کد زیر رو در نظر بگیرید:
1
2
3
4
5
6
7
8
9
10
11
12
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
همونطور که دیدید با استفاده از ویژگی ها و خصوصیات Flexbox کاری کردیم که محتویات درون body بصورت وسط چین قرار داده بشن. همونطور که دیدید برای اینکار در ابتدا display رو برابر با flex قرار میدیم. Vendor Prefix ها رو برای پشتیبانی بیشتر قرار میدیم. ترازبندی ها رو هم center یا مرکز قرار دادیم. برای نمونه میتونین این مثال رو ببینید تا بیشتر با اون آشنا بشید. اگر دلتون میخاد که یه جایی باشه که بتونین با استفاده از اون هر المنتی رو در هر جایی و هر شرایطی، چه افقی و چه عمودی، وسط چین کنید به این آدرس برید و سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید
برچسب : ترفندهای حرفه ای تلگرام,ترفندهای حرفه ای فیسبوک,ترفندهای حرفه ای فتوشاپ, نویسنده : استخدام کار 7learn بازدید : 299 تاريخ : پنجشنبه 4 آذر 1395 ساعت: 3:12